<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>录入自定义页面</title>
		<!-- 引入 css -->
		<link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
		<!-- 引入 js -->
		<script src="/admin/plugin/wangEditor/index.js"></script>

		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

		<!--    引入Layui组件-->
		<link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css"
			tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
		<script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>

		<style type="text/css">
			.layui-table-click {
				background-color: cadetblue !important;
				color: white;
			}

			::-webkit-scrollbar {
				width: 6px;
				height: 10px;
				background-color: rgba(255, 255, 255, 0.1);
			}

			::-webkit-scrollbar-thumb {
				background: rgba(144, 147, 153, .3);
				border-radius: 4px;
				cursor: pointer;
			}

			.layui-form-label {
				float: left;
				display: block;
				padding: 7px 1px;
				width: 100px;
				font-weight: 400;
				line-height: 14px;
				text-align: right;
			}

			/**输入框高度设置**/
			.layui-input,
			.layui-select,
			.layui-textarea {
				height: 30px;
				line-height: 30px\9;
			}

			/**按钮样式设置**/
			.layui-btn {
				height: 30px;
				line-height: 30px;
				font-size: 13px;
			}

			.layui-btn+.layui-btn {
				margin-left: 0px;
			}

			.layui-table,
			.layui-table-view {
				margin: 0px 0;
			}

			
			.tableboxs{
				margin: 0 auto;
				width: 80%;
				position: relative;
			}
			
			.tablebox {
				margin: 0 auto;
				width: 80%;
				text-align: center;
				font-size: 20px;
			}

			.tablebox .titletop {
				margin-bottom: 10px;
				margin-top: 10px;
				font-size: 26px;
				font-weight: 700;
			}

			.tablebox .spans {
				width: 100%;
				text-align: right;
				margin-bottom: 5px;
			}

			.tablebox .spans div {
				display: flex;
				justify-content: space-between;
			}

			.tablebox td,
			.tablebox th {
				height: 30px;
				padding: 5px 10px;
			}

			.posbottom {
				width: 80%;
				margin: 10px auto;
				font-size: 20px;
			}

			.posbottom div {
				display: flex;
				justify-content: space-between;
			}
			.displayleft{
				display: flex;
				padding: 10px;
				background-color: #f1f1f1;
				margin-top: 20px;
			}
			.itembtn{
				width: 64px;
				text-align: center;
				border-left: 1px solid #ddd;
			}
			.itembtn:hover{
				cursor: pointer;
			}
			.fontweight{
				font-weight: 700;
			}
			.textleft{
				text-align: left;
			}

			
		</style>
	</head>
	<body >
		<div id="app">
			<div class="displayleft">
				<div class="itembtn" @click="printHtml"><i class="layui-icon layui-icon-print"></i> 打印</div>
			</div>
			<div class="demoTable" style="padding: 5px;" id="printMy">
				<table id="tablebox_table">
					<div class="tableboxs">
						<!-- 专用收据表格 -->
						<table border='1' class='tablebox'>
							<caption class="titletop">{{formData.sjtitle}}</caption>
							<caption class="spans">
								<div>
									<span>收款日期：{{formData.czsj}}</span>
									<span>NO.{{formData.pjh}}</span>
								</div>
							</caption>
							<tr>
								<td width="100px" class="fontweight">小区</td>
								<td colspan="3" class="textleft">{{formData.mapfj.xqmc}}</td>
								<td width="100px" class="fontweight">用户号</td>
								<td colspan="3" class="textleft">{{formData.mapfj.fjbh}}</td>
							</tr>
							<tr>
								<td class="fontweight">交款人</td>
								<td colspan="3" class="textleft">{{formData.zhxm}}</td>
								<td class="fontweight">地址</td>
								<td colspan="3" class="textleft">{{formData.mapfj.xqmc}}-{{formData.mapfj.ldmc}}-{{formData.mapfj.dymc}}-{{formData.mapfj.name}}</td>
							</tr>
							<tr class="fontweight">
								<td>费用项目</td>
								<td colspan="2">供暖期间</td>
								<td width="100px">单价</td>
								<td>计费面积</td>
								<td width="150px">用热状态</td>
								<td width="150px">实收金额</td>
								<td>备注</td>
							</tr>
							<tr v-for="item in formData.rows" style="font-size: 22px;" >
								<td>{{item.sfxm}}</td>
								<td colspan="2">{{item.jkqj}}</td>
								<td>{{item.dj}}</td>
								<td>{{item.sl}}</td>
								<td>正常</td>
								<td>{{item.fee}}</td>
								<td>{{item.bz}}</td>
							</tr>
							<tr v-for="item in formData.forcs" >
								<td></td>
								<td colspan="2"></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td class="fontweight">合计金额：</td>
								<td colspan="6" class="textleft">(人民币大写){{formData.sumfee_chine}}</td>
								<td>￥：{{formData.sumfee}}</td>
							</tr>
						</table>

						<div class="posbottom">
							<div>
								<span>开票人：{{formData.czr}}</span>
								<span>交费方式：{{formData.fkfs}}</span>
								<span>交款人签字：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
								<span>收费单位(章)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
							</div>
						</div>
					</div>


				</table>
			</div>
		</div>


		<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					parmsData:{},
					formData:{},
				},
				created(){
					this.parmsData = getParams();
					this.getData();
				},
				methods: {
					printHtml(){
						$("#printMy").print();
					},
					async getData(){
						const mapine = await postWebCustom(getTableId("982"),{"id":this.parmsData.id});
						this.formData = mapine.data;
						console.log(this.formData)
					}
				},

			})
		</script>
	</body>
</html>
